<template>
  <div class="app-container">
    <el-form ref="elForm" :disabled="$route.query.isInfo" :model="formData" :rules="rules" size="medium"
      label-width="130px">
      <h2 style="text-align: center">合同审批</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="检测项目" prop="jcxm">
            <el-select v-model="formData.jcxm" placeholder="请选择项目名称" clearable :style="{ width: '100%' }"
              @change="changeProject" value-key="name">
              <el-option v-for="dict in projectList" :key="dict.projectId" :label="dict.name" :value="dict" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="填表人" prop="userName">
            <!-- <UserDialog placeholder="请选择填表人" @change="changeExamined" v-model="formData.userId"></UserDialog> -->
            <el-input :disabled="true" v-model="formData.userName" placeholder="请输入填表人" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="填表部门" prop="deptId">
            <el-input v-model="formData.deptName" :disabled="true" placeholder="请输入部门" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="填表时间" prop="fillTime">
            <el-date-picker v-model="formData.fillTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择填表时间" clearable></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="委托单位" prop="wtdw">
            <el-input v-model="formData.wtdw" :disabled="true" placeholder="请输入委托单位" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同编号" prop="htbh">
            <el-input v-model="formData.htbh" :disabled="true" placeholder="请输入合同编号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="申请业务范围" prop="applyScope">
            <!-- <el-input v-model="formData.applyScope" placeholder="请输入申请业务范围" /> -->
            <el-row type="flex" :gutter="20">
              <el-col :span="24">
                <div class="topTitle">
                  <div>评审要素</div>
                  <div>评审记录</div>
                  <div>附件</div>
                  <div>备注</div>

                </div>

              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="15">
        <!-- 项目负责人 -->
        <el-col :span="6">
          <div style="margin-left: 150px;font-size: 14px;">项目负责人</div>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="xmfzrps">
            <el-input v-model="formData.xmfzrps" :disabled="false" placeholder="请输入评审记录" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="xmfzrfj">
            <FileUpload :isDelete="!$route.query.isInfo" v-model="formData.xmfzrfj" :isShowTip="false"></FileUpload>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="xmfzrbz">
            <el-input v-model="formData.xmfzrbz" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <!-- 技术负责人 -->
        <el-col :span="6">
          <div style="margin-left: 150px;font-size: 14px;">技术负责人</div>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="jsfzrps">
            <el-input v-model="formData.jsfzrps" placeholder="请输入评审记录" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="jsfzrfj">
            <FileUpload :isDelete="!$route.query.isInfo" v-model="formData.jsfzrfj" :isShowTip="false"></FileUpload>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="jsfzrbz">
            <el-input v-model="formData.jsfzrbz" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 其他主要检测人员 -->
      <el-row :gutter="15">
        <el-col :span="6">
          <div style="margin-left: 150px;font-size: 14px;">其他主要检测人员</div>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="qtrps">
            <el-input v-model="formData.qtrps" placeholder="请输入评审记录" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="qtrfj">
            <FileUpload :isDelete="!$route.query.isInfo" v-model="formData.qtrfj" :isShowTip="false"></FileUpload>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="qtrbz">
            <el-input v-model="formData.qtrbz" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <!-- 设备配置 -->
        <el-col :span="6">
          <div style="margin-left: 150px;font-size: 14px;">设备配置</div>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="zbpzps">
            <el-input v-model="formData.zbpzps" placeholder="请输入评审记录" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="zbpzfj">
            <FileUpload :isDelete="!$route.query.isInfo" v-model="formData.zbpzfj" :isShowTip="false"></FileUpload>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="zbpzbz">
            <el-input v-model="formData.zbpzbz" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <!-- 检测方法标准 -->
        <el-col :span="6">
          <div style="margin-left: 150px;font-size: 14px;">检测方法标准</div>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="jcffbzps">
            <el-input v-model="formData.jcffbzps" placeholder="请输入评审记录" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="jcffbzfj">
            <FileUpload :isDelete="!$route.query.isInfo" v-model="formData.jcffbzfj" :isShowTip="false"></FileUpload>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="" prop="jcffbzbz">
            <el-input v-model="formData.jcffbzbz" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <!-- 器具耗材 -->
        <el-col :span="8">
          <div style="margin-left: 150px;font-size: 14px;">器具耗材</div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="qjhcps">
            <el-input v-model="formData.qjhcps" placeholder="请输入评审记录" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="qjhcbz">
            <el-input v-model="formData.qjhcbz" placeholder="请输入备注" />
          </el-form-item>
        </el-col>

        <!-- 环境条件 -->
        <el-col :span="8">
          <div style="margin-left: 150px;font-size: 14px;">环境条件</div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="hjtjps">
            <el-input v-model="formData.hjtjps" placeholder="请输入评审记录" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="hjtjbz">
            <el-input v-model="formData.hjtjbz" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <!-- 委托方特殊要求 -->
        <el-col :span="8">
          <div style="margin-left: 150px;font-size: 14px;">委托方特殊要求</div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="wtftsyqps">
            <el-input v-model="formData.wtftsyqps" placeholder="请输入评审记录" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="wtftsyqbz">
            <el-input v-model="formData.wtftsyqbz" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <!-- 进度 -->
        <el-col :span="8">
          <div style="margin-left: 150px;font-size: 14px;">进度</div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="jdps">
            <el-input v-model="formData.jdps" placeholder="请输入评审记录" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="jdbz">
            <el-input v-model="formData.jdbz" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <!-- 检测费标准及支付方式 -->
        <el-col :span="8">
          <div style="margin-left: 150px;font-size: 14px;">检测费标准及支付方式</div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="jcfbzps">
            <el-input v-model="formData.jcfbzps" placeholder="请输入评审记录" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="jcfbzbz">
            <el-input v-model="formData.jcfbzbz" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <!-- 合法合规情况 -->
        <el-col :span="8">
          <div style="margin-left: 150px;font-size: 14px;">合法合规情况</div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="hfhgqkps">
            <el-input v-model="formData.hfhgqkps" placeholder="请输入评审记录" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="hehgqkbz">
            <el-input v-model="formData.hehgqkbz" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <!-- 分包单位 -->
        <el-col :span="8">
          <div style="margin-left: 150px;font-size: 14px;">分包单位</div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="fbqkps">
            <div style="display: flex;">
              <el-select v-model="formData.type" placeholder="" clearable :style="{ width: '100%' }">
                <el-option label="分包单位" :value="0" />
                <el-option label="不分包" :value="1" />

              </el-select>
              <el-input v-model="formData.fbqkps" placeholder="分包单位" :step="1" :style="{ width: '100%' }"
                controls-position="right">

              </el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="fbqkbz">
            <el-input v-model="formData.fbqkbz" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
            <el-button v-if="!$route.query.isInfo" type="primary" @click="submitForm">提交</el-button>
            <el-button :disabled="false" @click="resetForm">返回</el-button>
          </el-form-item>
        </el-col>
      </el-row>


    </el-form>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
// import { listCertType } from "@/api/system/qualification.js";
import {
  projectContractList,
} from "@/api/business/projectContract.js";
import { deptTreeSelect, selectUser } from "@/api/system/user.js";
import businessDialogSelection from '@/components/businessDialogSelection/index'
import {
  projectReviewRecordAdd,
  projectReviewRecordEdit,
  projectReviewRecordInfo,
} from "@/api/business/contractReview.js";
import {
  listCertType,
} from "@/api/system/applyBusiness.js";
export default {
  components: { Treeselect, businessDialogSelection },
  props: [],
  data() {
    return {
      loading: false,
      formData: {
        userId: undefined,
        deptId: undefined,
        oss: undefined,
        contentList: undefined,
        applyScope: undefined,
        fillTime: null,
        type: 1,
        scopes: []
      },
      // 是否展开，默认全部展开
      isExpandAll: true,
      deptOptions: [],
      rules: {
        oss: [
          {
            required: false,
            message: "附件不能为空",
            trigger: "change",
          },
        ],
        jcxm: [
          {
            required: true,
            message: "请选择检测项目",
            trigger: "blur",
          },
        ],
        fillTime: [
          {
            required: true,
            message: "请选择申请时间",
            trigger: "blur",
          },
        ],
        deptId: [
          {
            required: true,
            message: "请选择部门人员",
            trigger: "blur",
          },
        ],
        userName: [
          {
            required: true,
            message: "请输入人员",
            trigger: "change",
          },
        ],
      },
      userMultipleSelection: [],
      deviceOptions: [],
      cretList1: [],
      cretList2: [],
      cretListAll2: [],
      cretListAll1: [],

      certTypeId2: [],
      certTypeId1: [],
      flag: false,
      projectList: [],
    };
  },
  computed: {},
  created() {
    this.getList()
    this.listSelect();
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
    this.getDeptTree();
    // this.getCretList(1);
    // this.getCretList(2);
  },
  mounted() { },
  methods: {
    listSelect() {
      projectContractList({ pageNum: 1, pageSize: 1000 }).then((response) => {
        this.projectList = response.rows;
        console.log(this.projectList);
      });
    },
    changeProject(e) {
      console.log(e);

      selectUser({ userId: e.createBy }).then((response) => {
        if (response.code == 200) {
          this.formData.projectContractId = e.projectContractId
          this.formData.htbh = e.code
          this.formData.jcxm = e.name
          this.formData.wtdw = e.etrustingParty
          this.formData.xmfzrps = e.projectLeaderName;
          this.formData.userName = e.projectLeaderName
          this.formData.userId = e.projectLeaderId
          this.formData.deptId = response.rows[0].dept.deptId;
          this.formData.deptName = response.rows[0].dept.deptName;
        }
      })
    },
    /** 转换资格证书数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.certTypeId,
        label: node.certTypeName,
        children: node.children,
      };
    },
    /** 查询资格证书列表 */
    getList() {
      this.loading = true;
      // this.queryParams.type = this.type;
      listCertType().then((response) => {
        this.deptList = this.handleTree(response.data, "applyWorkSettingId");
        console.log(this.deptList);
        // this.deptList.forEach(item=>{
        //   item.selected = false
        // })
        this.loading = false;
      });
    },
    // 多选框选中数据
    selectAll(selection) {
      this.flag = !this.flag
      this.splite(this.deptList, this.flag)
    },
    changeCurrentUser(val) {
      console.log(val);
      this.currentUserId = val.userId;
    },
    splite(data, flag) {

      data.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row, flag);
        if (row.applyWorkSettings != null) {
          console.log(row.applyWorkSettings);
          this.splite(row.applyWorkSettings);
        }
      })
    },
    handleselectionChange(e) {
      console.log(e);
    },
    onRowSelect(row) {
      console.log(row, 'row.selected');
      this.formData.applyScope = JSON.stringify(row)
      // this.formData.scopes.push(row)
      // this.formData.contentList = row
      console.log(this.formData.contentList, 'undefined');

      if (row.applyWorkSettings && row.applyWorkSettings.length > 0) {
        this.traverse(row.applyWorkSettings, row.selected)
      }
    },
    traverse(data, checked) {
      data.forEach((row) => {
        this.$set(row, 'selected', checked)
        this.$forceUpdate()
        if (row.applyWorkSettings && row.applyWorkSettings.length > 0) {
          this.traverse(row.applyWorkSettings, checked);
        }
      })
      console.log(data, '...');
      console.log(this.deptList);
    },
    // getCretList(type) {
    //   listCertType({ type: type }).then((response) => {
    //     if (type == 1) {
    //       this.cretListAll1 = response.data;
    //       this.cretList1 = this.handleTree(response.data, "certTypeId");
    //     } else {
    //       this.cretListAll2 = response.data;

    //       this.cretList2 = this.handleTree(response.data, "certTypeId");
    //     }
    //   });
    // },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    changeExamined(e, i) {
      if (e) {
        this.formData.userName = e.nickName;
        this.formData.deptId = e.dept.deptId;
        this.formData.deptName = e.dept.deptName;
      } else {
        this.formData.userName = e.nickName;
        this.formData.deptId = undefined;
        this.formData.deptName = undefined;
      }
      console.log(this.formData);
    },

    getinfo() {
      projectReviewRecordInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
        this.formData.type = this.formData.fbqkps ? 0 : 1
        console.log(this.formData.type);
      });
    },
    submitForm() {
      let query = JSON.parse(JSON.stringify(this.formData));
      // if (this.certTypeId1.length) {
      query.contentList = this.cretListAll1
        .filter((e) => this.certTypeId1.includes(e.certTypeId))
        .map((i) => {
          return {
            certTypeId: i.certTypeId,
            code: i.code,
            certTypeName: i.certTypeName,
            type: i.type,
          };
        });
      // }
      // if (this.certTypeId2.length) {
      query.contentList.push(
        ...this.cretListAll2
          .filter((e) => this.certTypeId2.includes(e.certTypeId))
          .map((i) => {
            return {
              certTypeId: i.certTypeId,
              code: i.code,
              certTypeName: i.certTypeName,
              type: i.type,
            };
          })
      );
      // }
      console.log(query.contentList);
      // if (!query.contentList.length) {
      //   this.$message.warning("选择证书");
      //   return;
      // }
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          console.log(this.contentList);
          if (this.formData.projectReviewRecordId != undefined) {
            projectReviewRecordEdit(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            projectReviewRecordAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    select(e) {
      console.log(e);
    },
    resetForm() {
      const obj = { path: "./contractReview" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
<style scoped lang="scss">
.topTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f8f8f9;
  border-bottom: 1px solid #f1f1f1;
  padding-left: 20px;
  padding-right: 20px;
  color: #515a6e;
  font-weight: 600;
}
</style>